<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css"/>
</head>
<body>
<div id="app">
    <el-button type="primary" @click="search">查询</el-button>
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="id"
                width="180">
        </el-table-column>
        <el-table-column
                prop="username"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="salary"
                label="工资">
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageno"
            :page-sizes="[2, 3, 5, 7]"
            :page-size="2"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
<script src="vue.js"></script>
<script src="qs.min.js"></script>
<script src="axios.min.js"></script>
<script src="jquery.js"></script>
<!--下面的是elementui的js-->
<script src="index.js"></script>


<script>
    let vm = new Vue({
        el: "#app",
        data: {
            tableData: [],
            total: 0,
            pagesize:2,
            pageno:1
        },
        methods: {
            search:function (){
                vm.fetchData(1,vm.pagesize)
            },
            handleSizeChange(currentSize){
                this.fetchData(vm.pageno,currentSize)
            },
            handleCurrentChange(currentpage){
               // alert(currentpage)
               // alert("pageno:" + vm.pageno)
                this.fetchData(currentpage,vm.pagesize)
            },
            fetchData(currentpage,pagesize){
                axios.get("/elementpage?page="+ currentpage + "&pagesize="+pagesize).then(function (resp){
                    vm.tableData= resp.data.list
                    vm.total = resp.data.total
                    vm.pageno = resp.data.pageNum
                })
            }
        }
    })
</script>
</body>
</html>